<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l("path_no")}}</nz-form-label>
    <nz-form-control>
      <nz-input-group nzSuffixIcon="anticon">
        <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone: true}" nz-input
               [placeholder]="l('please_enter_path_no')">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('start_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="select-1" [(ngModel)]="startSite" [ngModelOptions]="{standalone: true}"
                 [nzPlaceHolder]="l('please_select_start_site')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_start_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('end_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="select-2" [(ngModel)]="endSite" [ngModelOptions]="{standalone: true}"
                 [nzPlaceHolder]="l('please_select_end_site')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_end_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
  </nz-form-item>
</form>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
          [nzData]="tableHelper.items"
          [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
          [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()"
          (nzPageSizeChange)="load()">
  <thead>
  <tr>
    <th nzLeft="0px">{{l('serial_number')}}</th>
    <th>{{l('path_no')}}</th>
    <th>{{l('start_site')}}</th>
    <th>{{l('start_company')}}</th>
    <th>{{l('end_site')}}</th>
    <th>{{l('end_company')}}</th>
    <th>{{l('default')}}</th>
    <th>{{l('type')}}</th>
    <!-- <th>{{l('average_time')}}</th> -->
    <th>{{l('operation')}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of ajaxTable.data;let i = index">
    <td nzLeft="0px">{{i++1}}</td>
    <td>{{data.pathNo}}</td>
    <td>{{data.startSiteName}}</td>
    <td>{{data.startWarehouseName}}</td>
    <td>{{data.endSiteName}}</td>
    <td>{{data.endWarehouseName}}</td>
    <td>
      <span *ngIf="data.defaultFlag">{{l('bl_true')}}</span>
      <span *ngIf="!data.defaultFlag">{{l('bl_false')}}</span>
    </td>
    <td>{{data.typeName}}</td>
    <!-- <td>
      <a (click)="averageTime(data)" *ngIf="!data.averageTime">{{l('view_average_time')}}</a>
      <span *ngIf="data.averageTime">{{data.averageTime.split('.')[0]}}({{l('minutes')}})</span>

    </td> -->
    <td>
      <a (click)="showPath(data)">{{l('view_path')}}</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a (click)="editStatus(data)" *ngIf="!data.enableFlag">{{l('enable')}}</a>
      <a (click)="editStatus(data)" *ngIf="data.enableFlag">{{l('disenable')}}</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a (click)="confirm(data)" >{{l('delete')}}</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>
<app-path-detail-modal #pathDetailModal></app-path-detail-modal>
<app-set-path-reason-modal #setPathReasonModal (modalSave)="load()"></app-set-path-reason-modal>
